<template>
  <el-drawer
    ref="drawerBox"
    :visible.sync="drawerVisible"
    :close-on-press-escape="false"
    :title="options.name"
    :size="showMobilePage?'100%':'80%'"
    append-to-body
    @close="closeDialog"
  >
    <div v-if="configData" class="drawer-content">
      <FilterInput
        v-model="paramsObj"
        :filter-list="configData.filterList"
        show-search-btn
        line-feed
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus"
      />
      <el-tabs v-model="curTabName" style="margin: 17px 0 8px" @tab-click="onSubActiveOrderChange">
        <el-tab-pane label="列表" name="all"/>
        <el-tab-pane name="selected">
          <span slot="label">已选择<el-badge v-if="selectedData.length" :value="selectedData.length" /></span>
        </el-tab-pane>
      </el-tabs>
      <div class="table-list">
        <div v-loading="listLoading">
          <template v-if="(isAllTab && list.items.length > 0) || (isSelectedTab && selectedData.length > 0)">
            <el-table
              ref="linkTableRef"
              :data="isAllTab?list.items:selectedTableData"
              :row-class-name="(data) => tableRowClassName(data)"
              :height="setTableHeight"
              class="fb-table"
              header-cell-class-name="order-data-header-cell"
              element-loading-text="加载中..."
              empty-text="暂无数据"
              fit
              select-callback
              hightlight-current-rowref="tableRef"
              @select="selectTable"
              @select-all="selectTable">
              <el-table-column align="center" type="selection" fixed="left" width="50" />
              <template v-for="(colItem) in element.subform">
                <LinkFormTableColumn :key="colItem.key" :col-item="colItem" :config-data="configData" />
              </template>
            </el-table>
          </template>
          <EmptyPlaceholder v-else empty-text="暂无数据" is-border />
        </div>
        <fixed-pagination class="bottom-pagination">
          <div class="delete-button-container">
            <el-button :disabled="!hasSeleted" size="small" type="primary" class="related-btn" @click="confirm">关联</el-button>
            <el-button size="small" plain type="primary" class="related-btn" @click="closeDialog">关闭</el-button>
          </div>
          <el-pagination
            v-show="(isAllTab && list.total > 0) || (isSelectedTab && selectedData.length > 0)"
            :current-page="isAllTab?list.page:selectedPage"
            :page-size="isAllTab?list.perPage:selectedPerPage"
            :total="isAllTab?list.total:selectedData.length"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="showMobilePage?'total, prev, next':'total, prev, pager, next, sizes,jumper'"
            :small="showMobilePage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </fixed-pagination>
      </div>
    </div>
  </el-drawer>
</template>

<script>
/**
 * 关联各种审批表单
 */
// api
// import { getCommonApprovalList } from '@/api/approvalModule';
// mixins
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
// components
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import FilterInput from '@/components/Tool/filter';
import LinkFormTableColumn from '@/components/Common/relatedProcess/LinkFormTableColumn';
// import { BUSINESS_TYPE } from '@/utils/const/process';
import { createConfig } from './data';
import { mapState } from 'vuex';

export default {
  name: 'RelatedLinkForm',
  components: {
    FilterInput, EmptyPlaceholder, LinkFormTableColumn
  },
  mixins: [tableSelections, TableAdaptive],
  props: {
    element: {
      type: Object,
      default: null
    },
    /**
     * options
     * type: (与 BUSINESS_TYPE 中的一致)
     * 0: 合同审批  1: 请款审批 2:精力分配 3:签约内审 4:申请原件 5:开票申请
     * 6:发票作废 7:员工报销 8:借款申请 9:还款申请
     *
     * id
     * name
     */
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramsObj: {},
      drawerVisible: false,
      page: 1,
      perPage: 20,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0
      },
      selectedPage: 1,
      selectedPerPage: 20,
      sortType: '',
      sortName: '',
      listLoading: false,
      idKey: 'id', // 多选框参数
      tableRefName: 'linkTableRef',
      curTabName: 'all',
      selectedData: [],
      cancelToken: null,
      tableOutsideHeight: 223,
      configData: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAllTab() {
      return this.curTabName === 'all';
    },
    isSelectedTab() {
      return this.curTabName === 'selected';
    },
    hasSeleted() {
      return this.multipleSelectionAll.length > 0;
    },
    selectedTableData() {
      return this.selectedData.slice((this.selectedPage - 1) * this.selectedPerPage, this.selectedPage * this.selectedPerPage);
    }
  },
  methods: {
    // 获取列表数据
    fetchData(reset = false) {
      if (!this.configData.api) return;
      if (reset) this.page = 1;
      this.listLoading = true;
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      params.page = this.page;
      params.perPage = this.perPage;
      params.fromProcess = 1;
      if (this.element.options.presetFilterParams) {
        params.presetFilter = this.element.options.presetFilterParams;
      }
      if (this.configData.handelParams) this.configData.handelParams(params);
      this.configData.api(params).then((res) => {
        if (res.code === 200 && res.data) {
          this.list = res.data;
          this.setSelectRow(res.data.items);
        }
        this.listLoading = false;
      });
    },
    // 初始获取数据
    oepnDialog(data = []) {
      this.drawerVisible = true;
      createConfig(this.options.type).then(res => {
        this.configData = res;
        this.selectedData = data;
        this.multipleSelectionAll = data;
        this.curTabName = 'all';
        this.fetchData();
      });
    },
    closeDialog() {
      this.drawerVisible = false;
    },
    // fitter
    queryClick() {
      if (this.isSelectedTab) this.curTabName = 'all';
      this.fetchData(true);
    },
    queryEmpty() {
      this.sortType = '';
      this.sortName = '';
      this.paramsObj = {};
      this.queryClick();
    },
    // 翻页
    handleData(tableData) {
      return tableData.slice((this.selectedPage - 1) * this.selectedPerPage, this.selectedPage * this.selectedPerPage);
    },
    handleSizeChange(val) {
      if (this.curTabName === 'all') {
        this.perPage = val;
        this.fetchData(true);
      } else if (this.isSelectedTab) {
        this.selectedPerPage = val;
        this.setSelectRow(this.selectedTableData);
      }
    },
    handleCurrentChange(toPage) {
      if (this.curTabName === 'all') {
        this.page = toPage;
        this.fetchData();
      } else if (this.isSelectedTab) {
        this.selectedPage = toPage;
        this.setSelectRow(this.selectedTableData);
      }
    },
    // 关联合同
    confirm() {
      const data = this.selectedData;
      this.$emit('confirm', data);
      this.closeDialog();
    },
    // 切换列表tab
    onSubActiveOrderChange(data) {
      if (data.paneName === 'all') {
        this.fetchData();
      }
      if (this.isSelectedTab) this.setSelectRow(this.selectedTableData);
    },
    // 保留数据
    tableSelectionChange(selection) {
      this.selectedData = selection;
      if (this.isSelectedTab) this.setSelectRow(this.selectedTableData);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-drawer__header {
    height: 48px;
    padding: 0 12px 0 24px;
    margin: 0;
    box-shadow: 2px 4px 5px 0 rgba(221,225,234,0.3);
    display: flex;
    align-items: center;
    > span {
      font-size: 14px;
      color: #333;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      height: 0 !important;
    }
  }
  .el-tabs__header {
    margin: 0;
    border: none;
  }
  .el-drawer__body {
    overflow-y: auto;
    margin-bottom: 56px;
  }
  .el-drawer__header>span{
    font-size: 16px;
  }
  .el-badge__content{
    background: #FB5227;
  }
  .el-badge__content{
    margin-top: 18px;
  }
}

.tip {
  color: #999;
  font-size: 13px;
  margin-left: 20px;;
}
.drawer-content {
  padding: 22px 24px 0;
  overflow-y: auto;
  .table-list {
    border-radius: 10px;
    .el-row {
      padding: 0;
    }
    .delete-button-container {
      flex:1;
      height: 32px;
      display: flex;
      align-items: center;
      .related-btn {
        margin-left: 20px;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
    ::v-deep {
      .pagination-flex {
        position: absolute;
        width: 100% !important;
      }
    }
    &::v-deep {
      .cell-bg-box > .cell {
        height: 20px;
      }
      .text-bg {
        padding: 0 10px;
        border-radius: 999px;
        color: #fff;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        max-width: 100%;
      }
    }
  }
}
::v-deep {
  .el-tabs__nav-wrap::after {
    z-index: -1;
  }
  .el-tabs__active-bar {
    bottom: 1px;
  }
}
</style>
